@include b(control-grid) {
  #{getCssVarName('control-grid-selection-padding')}: getCssVar('spacing', 'extra-tight') 0;
  #{getCssVarName('control-grid-content-row-height')}: calc(getCssVar('height-control', 'default') + getCssVar('spacing', 'extra-tight'));
  #{getCssVarName('control-grid-row-bg-color-2')}: getCssVar(color, bg, 1);
  #{getCssVarName('control-grid-row-bg-color')}: getCssVar(color, bg, 2);
  #{getCssVarName('control-grid-row-select-color')}: rgb(189 213 250);
  #{getCssVarName('control-grid-row-select-text-color')}: getCssVar(color, black);
  #{getCssVarName('control-grid-row-hover-color')}: rgb(189 213 250);
  #{getCssVarName('control-grid-header-min-height')}: calc(getCssVar('height-control', 'default') + getCssVar('spacing', 'extra-tight'));
  #{getCssVarName('control-grid-header-text-color')}: getCssVar(color, black);
  #{getCssVarName('control-grid-header-bg-color')}: getCssVar(color, bg, 3);
  #{getCssVarName('control-grid-header-font-weight')}: normal;
  #{getCssVarName('control-grid-header-cell-padding')}: getCssVar('spacing', 'extra-tight') getCssVar('spacing', 'tight');
  #{getCssVarName('control-grid-page-height')}: getCssVar('height-control', 'large');
  #{getCssVarName('control-grid-border-color')}: #ebeef5;
  #{getCssVarName('control-grid-border')}: 0.1px solid getCssVar('control-grid-border-color');
  #{getCssVarName('control-grid-footer-bg-color')}: getCssVar(color, bg, 3);
  #{getCssVarName('control-grid-footer-font-weight')}: normal;

  // 新建行样式
  @include e(table) {
    .el-table__body-wrapper .el-table__row {
      &.is-create {
        position: relative;

        &::after {
          top: 0;
          left: 0;
          z-index: 1;
          content: "";
          position: absolute;
          border-right: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-top: 5px solid getCssVar(color, success);
          border-left: 5px solid getCssVar(color, success);
        }
      }
    }
  }

  @include when(enable-drop) {
    .#{bem(grid-column-header, caption)} {
      cursor: move;
    }
  }


  .el-table {
    // 行选中色样式, 字体颜色及背景色
    .el-table__body-wrapper tr {
      &.current-row td {
        color: getCssVar('control-grid-row-select-text-color');

        .#{bem('grid-edit-item')} {
          #{getCssVarName('form-item-readonly-color')}: getCssVar('control-grid-row-select-text-color');
          #{getCssVarName('form-item-text-color')}: getCssVar('control-grid-row-select-text-color');
        }

        .#{bem('grid-field-column')} {
          #{getCssVarName('grid-field-column-color')}: getCssVar('control-grid-row-select-text-color');
        }
      }
    }

    thead>tr th,
    th.el-table__cell.is-leaf,
    .el-table__row .el-table__cell {
      border-right: getCssVar('control-grid-border');
      border-bottom: getCssVar('control-grid-border');
    }
  }

  .el-table__body-wrapper {
    background-color: getCssVar(color, bg, 2);
    border-bottom: getCssVar('control-grid-border');

    .cell {
      min-height: 33px;
    }

    td.is-center .cell {
      justify-content: center;
    }
  }

  .el-table--border .el-table__inner-wrapper::after,
  .el-table--border::after,
  .el-table--border::before,
  .el-table__inner-wrapper::before {
    background-color: getCssVar('control-grid-border-color');
  }


  // 表格编辑列样式
  @include b(grid-edit-item) {
    #{getCssVarName('grid-edit-item-cell-hover-bg-color')}: getCssVar('control-grid-row-hover-color');
    #{getCssVarName('control-grid-cell-padding')}: getCssVar('spacing', 'extra-tight') getCssVar('spacing', 'tight');

    @include m(show-mask) {
      &:hover {
        cursor: text;
      }
    }
  }
}